<template>
    <div class="indexContainer">
        <el-container>
            <!--设备栏-->
            <el-aside>
                <equipment-list :list="equipmentList" @func="getName"></equipment-list>
            </el-aside>
            <!--展示区域-->
            <el-main>
                <!--    可拖拽的自定义布局-->
                <grid-layout
                    :col-num="24"
                    :is-draggable="true"
                    :is-mirrored="false"
                    :is-resizable="true"
                    :layout.sync="layout"
                    :margin="[10, 10]"
                    :row-height="10"
                    :use-css-transforms="true"
                    :vertical-compact="true"
                >
                    <grid-item
                        v-for="(item,index) in layout"
                        :key="item.i"
                        :h="item.h"
                        :i="item.i"
                        :w="item.w"
                        :x="item.x"
                        :y="item.y"
                    >
                        <div v-if="item.name === '电能表'" style="height: 100%;width: 100%">
                            <electric
                                :id="item.i"
                                :name="item.name"
                                :option="optionList.electricEnergyMeter"
                                :y-data="yData"
                                @one="setOne"
                                @total="setAll"
                            ></electric>
                            <i class="el-icon-close close" @click="closeEquip(index)"></i>
                        </div>
                    </grid-item>
                </grid-layout>
            </el-main>
            <!--设备属性设置区域-->
            <el-aside>
                <option-list v-if="setOption.length>0" :list="setOption"></option-list>
                <div v-else class="nullData">请选择需要设置的属性</div>
            </el-aside>
        </el-container>
    </div>
</template>
<script>
import api from '@/api/index';
import electric from '@/components/electric';
import equipmentList from '@/components/equipmentList';
import optionList from '@/components/optionList';

//导入常量
import config from '@/config/index';
import { post } from '@/utils/axiosUtils/index';
import VueGridLayout from 'vue-grid-layout';
//导入draggable组件
import draggable from 'vuedraggable';

export default {
    name: 'index',
    created() {
        this.time = setInterval(() => {
            post(api.getData, ['v-1'], 'raw')
                .then(res => {
                    // console.log(res.data[0].data);
                    let data = res.data[0].data;
                    this.setYData(data.voltage, this.yData.voltage);
                    this.setYData(data.electricity, this.yData.electricCurrent);
                    this.setYData(data.activePower, this.yData.activePower);
                    this.setYData(data.reactivePower, this.yData.reactivePower);
                    this.setYData(data.wattHover, this.yData.electricDegree);
                    this.setYData(data.allWattHover, this.yData.totalDegree);
                });
        }, 2000);
    },
    data() {
        return {
            time: '',
            layout: [
                { x: 0, y: 0, w: 24, h: 12, i: 0, name: '电能表' }
            ],
            yData: {
                voltage: [],
                electricCurrent: [],
                activePower: [],
                reactivePower: [],
                electricDegree: [],
                totalDegree: []
            },
            equipmentList: config.equipmentList,
            optionList: config.optionList,
            setOption: ''
        };
    },
    //注册draggable组件
    components: {
        draggable, equipmentList, electric, optionList,
        GridLayout: VueGridLayout.GridLayout,
        GridItem: VueGridLayout.GridItem
    },
    methods: {
        //获取点击的设备的名字,添加设备
        getName(data) {
            console.log(data);
            this.layout.push({ x: 0, y: 0, w: 24, h: 12, i: this.layout.length, name: data });
        },
        //关闭设备
        closeEquip(data) {
            console.log(data);
            this.layout.splice(data, 1);
        },
        //设置所有
        setAll(data) {
            // console.log(data);
            this.setOption = this.optionList.electricEnergyMeter;
        },
        //设置单个属性
        setOne(data) {
            console.log(data);
            if (data === '实时电压') {
                this.setOption = Array(1).fill(this.optionList.electricEnergyMeter[0]);
            } else if (data === '实时电流') {
                this.setOption = Array(1).fill(this.optionList.electricEnergyMeter[1]);
            } else if (data === '有功功率') {
                this.setOption = Array(1).fill(this.optionList.electricEnergyMeter[2]);
            } else if (data === '无功功率') {
                this.setOption = Array(1).fill(this.optionList.electricEnergyMeter[3]);
            } else if (data === '电度') {
                this.setOption = Array(1).fill(this.optionList.electricEnergyMeter[4]);
            }

        },
        //设置y轴数据
        setYData(val, arr) {
            if (arr.length === 7) {
                arr.shift();
            }
            arr.push(val);
        }

    }
};
</script>
<style lang="less" scoped src="../style/index.less">
</style>
